<template>
  <div class="satisfaction-report-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>客户满意度报表</span>
          <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </div>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="平均满意度" :value="4.5" suffix="/5.0">
              <template #prefix>
                <el-icon style="color: #F7BA2A"><Star /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="总反馈数" :value="156" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="表扬数" :value="89">
              <template #prefix>
                <el-icon style="color: #67C23A"><CircleCheck /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="问题数" :value="28">
              <template #prefix>
                <el-icon style="color: #F56C6C"><Warning /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>满意度趋势</span>
            </template>
            <v-chart :option="trendChartOption" style="height: 350px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>反馈类型分布</span>
            </template>
            <v-chart :option="feedbackTypeChartOption" style="height: 350px" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <span>各项目满意度对比</span>
            </template>
            <v-chart :option="projectSatisfactionChartOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 客户反馈列表 -->
      <el-card shadow="hover" style="margin-top: 20px">
        <template #header>
          <span>客户反馈详情</span>
        </template>
        <el-table :data="feedbackData" border stripe>
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="project" label="项目名称" width="180" />
          <el-table-column prop="customer" label="客户名称" width="120" />
          <el-table-column prop="type" label="反馈类型" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getFeedbackType(row.type)">
                {{ getFeedbackText(row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rating" label="评分" width="150">
            <template #default="{ row }">
              <el-rate v-model="row.rating" disabled show-score />
            </template>
          </el-table-column>
          <el-table-column prop="content" label="反馈内容" min-width="250" show-overflow-tooltip />
          <el-table-column prop="date" label="反馈时间" width="120" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { Download, Star, CircleCheck, Warning } from '@element-plus/icons-vue'

use([CanvasRenderer, LineChart, PieChart, RadarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const feedbackData = ref([
  { project: 'XX集团ERP实施', customer: 'XX集团', type: 'praise', rating: 5, content: '实施团队专业，服务好', date: '2024-10-15' },
  { project: 'YY公司财务系统', customer: 'YY公司', type: 'suggestion', rating: 4, content: '建议增加报表功能', date: '2024-10-14' },
  { project: 'ZZ制造ERP项目', customer: 'ZZ制造', type: 'problem', rating: 3, content: '系统响应速度待优化', date: '2024-10-13' }
])

const trendChartOption = ref({
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
  yAxis: { type: 'value', name: '满意度', max: 5 },
  series: [{
    name: '满意度',
    type: 'line',
    data: [4.2, 4.3, 4.4, 4.5, 4.6, 4.5],
    smooth: true,
    areaStyle: {}
  }]
})

const feedbackTypeChartOption = ref({
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '反馈类型',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 89, name: '表扬' },
      { value: 39, name: '建议' },
      { value: 28, name: '问题' }
    ]
  }]
})

const projectSatisfactionChartOption = ref({
  tooltip: {},
  legend: { data: ['项目A', '项目B', '项目C', '项目D'] },
  radar: {
    indicator: [
      { name: '专业能力', max: 5 },
      { name: '服务态度', max: 5 },
      { name: '响应速度', max: 5 },
      { name: '问题解决', max: 5 },
      { name: '整体满意', max: 5 }
    ]
  },
  series: [{
    name: '满意度评分',
    type: 'radar',
    data: [
      { value: [4.5, 4.8, 4.3, 4.6, 4.5], name: '项目A' },
      { value: [4.2, 4.5, 4.1, 4.3, 4.2], name: '项目B' },
      { value: [4.7, 4.9, 4.6, 4.8, 4.7], name: '项目C' },
      { value: [4.0, 4.3, 3.9, 4.1, 4.0], name: '项目D' }
    ]
  }]
})

const getFeedbackType = (type) => {
  const map = { problem: 'danger', suggestion: 'warning', praise: 'success' }
  return map[type] || ''
}

const getFeedbackText = (type) => {
  const map = { problem: '问题', suggestion: '建议', praise: '表扬' }
  return map[type] || type
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.satisfaction-report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}
</style>

